.{$switch-prefix}
  position relative
  line-height 28px
  cursor pointer
  display inline-block
  &:active
    .{$switch-prefix}-span
      &:after
        width 32px
  .{$switch-prefix}-span
    position relative
    display inline-block
    box-sizing border-box
    min-width 48px
    height 28px
    margin 0 5px 0 0
    overflow hidden
    background-color $gray2-color
    border-radius 16px
    vertical-align middle
    user-select none
    transition $transition-time ease-in-out
    &:before, &:after
      content ""
      position absolute
      transition $transition-time ease-in-out
    &:before
      background-color $gray2-color
      top 0
      bottom 0
      left 0
      right 0
    &:after
      top 2px
      left 2px
      width 24px
      height 24px
      border-radius 15px
      background-color $white-color
      box-shadow 0 1px 3px rgba(0,0,0,.4)
  .{$switch-prefix}-text
    display inline-block
    margin-right 5px
  &.{$switch-prefix}-small
    line-height 22px
    .{$switch-prefix}-span
      min-width 40px
      height 22px
      &:after
        width 18px
        height 18px
    .{$switch-prefix}-text
      position relative
      top 1px
    &:active
      .{$switch-prefix}-span
        &:after
          width 24px
    &.{$switch-prefix}-checked
      .{$switch-prefix}-span
        &:after
          left 20px
  &.{$switch-prefix}-checked
    .{$switch-prefix}-span
      background-color $primary-color
      &:after
        left 22px
      &:before
        transform scale(0)
    &:active
      .{$switch-prefix}-span
        &:after
          left 14px
